<template>
  <div class="footer">
    <div class="linkBox">
      <div class="links">
        <div
          v-for="l in link"
          :key="l.id"
          class="link-item"
          style="cursor: pointer"
          @click="toLink(l)"
        >
          <span class="dian" />{{ l.name }}
        </div>
      </div>
      <el-divider direction="vertical" />
      <div class="concat">
        <div class="phone">
          <img
            src="../assets/img/logo3.png"
            alt=""
          >
          <span>{{ siteIfon.site_400 }}</span>
        </div>
        <div class="code">
          <p class="code-item">
            <span class="dian" />{{ siteIfon.beian }}
          </p>
          <p class="code-item">
            <span class="dian" />{{ siteIfon.gongan_beian }}
          </p>
          <p class="code-item">
            <span class="dian" />{{ siteIfon.jy_card }}
          </p>
        </div>
      </div>
      <el-divider direction="vertical" />
      <div class="qrCode">
        <div class="qr-list">
          <img
            src="../assets/img/app.png"
            alt=""
          >
          <span>App-ios</span>
        </div>
        <div class="qr-list">
          <img
            src="../assets/img/app.png"
            alt=""
          >
          <span>App-安卓</span>
        </div>
        <div class="qr-list">
          <img
            src="../assets/img/weixin.jpg"
            alt=""
          >
          <span>微信公众号</span>
        </div>
      </div>
    </div>
    <div class="companyInfo">
      <div class="date">
        2018JCNAP.ALL RIGHTS RESERVED.
      </div>
      <div class="site-icon">
        <img
          src="../assets/img/tagImg.png"
          alt=""
        >
        <img
          src="../assets/img/2@2x(2).png"
          alt=""
        >
        <img
          src="../assets/img/3@2x(1).png"
          alt=""
        >
      </div>
      <div class="date">
        <div>技术支持：云南建投</div>
        <div class="data-item">
          <div>手机APP下载：</div>
          <div class="buttonSpan">
            <el-popover
              placement="top-start"
              trigger="click"
            >
              <img
                src="../assets/img/app.png"
                alt=""
                style="
                  width: 5.44rem;
                  height: 5.44rem;
                  background: rgba(71, 71, 71, 1);
                  margin: 0 auto;
                  text-align: center;
                  display: flex;"
              >
              <div slot="reference">
                <img
                  src="../assets/img/iosIco_35.png"
                  alt=""
                >
                IOS
              </div>
            </el-popover>
          </div>

          <div class="buttonSpan">
            <el-popover
              placement="top-start"
              trigger="click"
            >
              <img
                src="../assets/img/app.png"
                alt=""
                style="
                  width: 5.44rem;
                  height: 5.44rem;
                  background: rgba(71, 71, 71, 1);
                  margin: 0 auto;
                  text-align: center;
                  display: flex;"
              >
              <div slot="reference">
                <img
                  src="../assets/img/anIco_35.png"
                  alt=""
                >
                Android
              </div>
            </el-popover>
          </div>

          <el-popover
            placement="top-start"
            trigger="click"
            width="600"
            @hide="hide"
          >
            <el-form
              ref="form"
              :model="form"
              label-width="180px"
            >
              <el-form-item label="投诉类型">
                <el-select
                  v-model="form.back_category_id"
                  placeholder="请选择投诉类型"
                  style="width:100%"
                >
                  <el-option
                    v-for="(item, index) in BackCategoryList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="投诉建议">
                <el-input
                  v-model="form.content"
                  rows="3"
                  placeholder="请写下您对营家商城的感受，我们将认真听取您的意见，努力提供更优质的服务。"
                  type="textarea"
                />
              </el-form-item>

              <el-form-item label="联系方式">
                <el-input
                  v-model="form.connect"
                  placeholder="手机/邮箱/QQ(选填)"
                  type="text"
                />
              </el-form-item>

              <el-form-item label="上传图片（最多6张）">
                <el-upload
                  :action="`${base.sq}`+ '/client/FileUpload/upload?size=M&terminaltype=PC'"
                  list-type="picture-card"
                  :on-success="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :limit="6"
                  :file-list="fileList"
                >
                  <i class="el-icon-plus" />
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img
                    width="100%"
                    :src="form.images"
                    alt=""
                  >
                </el-dialog>
              </el-form-item>

              <el-form-item>
                <el-button
                  class="onSubmitButton"
                  round
                  size="small"
                  @click="onSubmit"
                >
                  提交
                </el-button>
              </el-form-item>
            </el-form>
            <div slot="reference">
              <div class="buttons">
                投诉中心
              </div>
            </div>
          </el-popover>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
	import base from '@/api/base'; // 导入接口域名列表
	export default {
		name: "",
		components: {},
		data() {
			return {
				siteIfon: {},
				link: [],
				base,
				BackCategoryList: [],
				ImagesArr: [],
				fileList: [],
				// 投诉中心
				dialogVisible: false,
				form: {
					back_category_id: '', // 投诉类型
					content: '', // 投诉建议
					connect: '', // 联系方式
					images: '',
				}
			};
		},
		mounted() {
			this.getData();
			this.BackCategoryData()
			console.log('abase', this.base)
		},
		methods: {
			getData() {
				//中间部分备案号
				this.$api.home.footersite().then((res) => {
					if (res.code == 1) {
						this.siteIfon = res.data;
					} else {
						this.$message.error(res.msg);
					}
				});
				//外链列表
				this.$api.home.footerline().then((res) => {
					if (res.code == 1) {
						this.link = res.data;
					} else {
						this.$message.error(res.msg);
					}
				});
			},
			// 类型列表
			BackCategoryData() {
				this.$api.commit.BackCategory().then(res => {
					console.log('类型列表', res)
					this.BackCategoryList = res.data
				})
			},
			// 提交
			onSubmit() {
				console.log('提交', this.form, this.fileList)
				let params = this.form
				this.$api.commit.FeedbackApi(params).then(res => {
					if (res.code === 1) {
						this.$message.success('提交成功')
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			// 移除
			handleRemove(file, fileList) {
				console.log('移除', file, fileList);
				let NewFileList = []
				for (let i = 0; i < fileList.length; i++) {
					NewFileList.push(fileList[i].response.data.imgurl)
				}
				this.ImagesArr = NewFileList
				this.ImagesArrToString(NewFileList)
			},
			// 上传成功
			handlePictureCardPreview(response, file, fileList) {
				console.log('上传', response, file, fileList)
				let NewFileList = []
				for (let i = 0; i < fileList.length; i++) {
					NewFileList.push(fileList[i].response.data.imgurl)
				}
				this.ImagesArr = NewFileList
				this.ImagesArrToString(NewFileList)
			},
			// 图片格式转化
			ImagesArrToString(ImagesArr) {
				console.log('图片格式转化', ImagesArr)
				this.form.images = ImagesArr.join(',')
			},
			// 提示隐藏
			hide() {
				console.log('提示隐藏', )
				this.form = {
					back_category_id: '', // 投诉类型
					content: '', // 投诉建议
					connect: '', // 联系方式
					images: '',
				}
				this.ImagesArr = []
				this.fileList = []
			},
			//跳转
			toLink(item) {
				window.open(item.url);
			},
		},
	};
</script>

<style scoped lang="scss">
	.footer {
		height: 20rem;
		position: relative;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		z-index: 10;
		box-shadow: 0px 0px 10px #eee;

		.linkBox {
			height: 16.56rem;
			background: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 15.25rem;

			.el-divider--vertical {
				height: 7.13rem;
			}

			.links {
				width: 20rem;
				display: flex;
				flex-wrap: wrap;
				align-items: flex-start;
				justify-content: flex-start;

				.link-item {
					font-size: 0.88rem;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					padding: 1.5rem 0.6rem;
				}
			}

			.concat {
				display: flex;
				flex-direction: column;

				.phone {
					img {
						width: 1.88rem;
						height: 1.19rem;
						margin-right: 0.44rem;
					}

					span {
						font-size: 1.5rem;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
					}
				}

				.code {
					margin-top: 1.62rem;
					display: flex;
					flex-direction: column;

					.code-item {
						font-size: 0.88rem;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						line-height: 1.88rem;
					}
				}
			}

			.qrCode {
				width: 18rem;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.qr-list {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-right: 2.38rem;

					img {
						width: 5.44rem;
						height: 5.44rem;
						background: rgba(71, 71, 71, 1);
						margin-bottom: 1.69rem;
					}

					span {
						font-size: 0.75rem;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(102, 102, 102, 1);
					}
				}
			}
		}

		.companyInfo {
			height: 3.44rem;
			background: rgba(32, 32, 32, 1);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 16.25rem;

			.date {
				font-size: 0.9rem;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #8c8c8c;
				display: flex;
				width: 30rem;
				align-items: center;
				justify-content: space-between;

				.data-item {
					display: flex;
					align-items: center;

					.buttonSpan {
						margin-right: 1rem;
						cursor: pointer;

						img {
							width: .9rem;
						}
					}

					.buttons {
						background: #252525;
						padding: .5rem 1rem;
						border-radius: 1rem;
						cursor: pointer;
					}
				}

			}

			.site-icon {
				img {
					margin-right: 1.19rem;
					cursor: pointer;
				}
			}
		}
	}

	.onSubmitButton {
		background: black;
		color: #fff;
		border: black;
	}

	.onSubmitButton:hover {
		background: black;
		color: #fff;
		border: black;
	}

	.onSubmitButton:focus,
	.onSubmitButton:hover {
		color: #fff;
		border-color: black;
		background-color: black;
	}
</style>
